<template>
    <div class="AlbumBox" v-if="album.length!=0">
      <div class="AlbumList" v-for="item in album" :key="item">
        <img class="img" v-lazy="item.picUrl" @click="getalbumdetail(item.id)">
        <p>{{ item.name }}</p>
        <p>{{ publishTimetran(item.publishTime)}}</p>
      </div>
    </div>
  <div v-else>
    <p style="text-align: center">无数据</p>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import {useSongsStore,usealbumDetailStore} from "@/Store/Pinia/pinia"
import {computed} from "vue";
import {storeToRefs} from "pinia";
const songsStore =useSongsStore();
const albumDetail=usealbumDetailStore();
const router=useRouter();
const {album} =storeToRefs(songsStore)

function getalbumdetail(id){
  albumDetail.getalbumDetail(id);
  songsStore.show=1;
  router.push({path:"/homePage/AlbumDetail/1"})
}


  const publishTimetran =computed(()=>{
    return (time)=>{
        let date=new Date(time);
        let year = date.getFullYear(),
          month = date.getMonth() + 1,
          strDate = date.getDate()
      if (month < 10) month = `0${month}`
      if (strDate < 10) strDate = `0${strDate}`

      return `${year}-${month}-${strDate}`
    }
  })

const sub=songsStore.$subscribe((mutation, state)=>{
  album.value=state.album;
},{detached:false})
</script>

<style scoped>
.AlbumBox{
  display: flex;
  flex-wrap:wrap;
  margin-left: 80px;
}

.AlbumBox .AlbumList{
  width: 250px;
  height: 250px;
  margin-right: 30px;
  margin-top: 20px;
  transition:All 0.4s ease-in-out;
}

.AlbumBox .AlbumList:hover{
  color: #8e09dc;
  transform:translate(0,-20px);
}
.AlbumBox .AlbumList .img{
  width: 220px;
  height: 180px;
}
</style>